<template>
    <div class="pagination" role="group" aria-label="分页">
      <button type="button" class="btn btn-outline-dark" v-bind:disabled="page === 1" v-on:click="selectPage(1)">
        1
      </button>
      <button type="button" class="btn btn-outline-dark" v-bind:disabled="page === 1" v-on:click="selectPage(page - 1)">
        上一页
      </button>
      <button v-for="p in pages" v-bind:id="'page-' + p" type="button"
              v-bind:class="{'btn-primary active':page == p}" class="btn btn-outline-dark" v-on:click="selectPage(p)">
        {{p}}
      </button>
      <button type="button" class="btn btn-outline-dark" v-bind:disabled="page === pageTotal" v-on:click="selectPage(page + 1)">
        下一页
      </button>
      <button type="button" class="btn btn-outline-dark" v-bind:disabled="page === pageTotal" v-on:click="selectPage(pageTotal)">
        {{pageTotal||1}}
      </button>
    </div>
  </template>
  
  <script>
    export default {
      name: 'pagination',
      props: {
        list: {
          type: Function,
          default: null
        },
        itemCount: Number // 显示的页码数，比如总共有100页，只显示10页，其它用省略号表示
      },
      data: function () {
        return {
          total: 0, // 总行数
          size: 10, // 每页条数
          page: 0, // 当前页码
          pageTotal: 0, // 总页数
          pages: [], // 显示的页码数组
        }
      },
      methods: {
        /**
         * 渲染分页组件
         * @param page
         * @param total
         */
        render(page, total) {
          let _this = this;
          _this.page = page;
          _this.total = total;
          _this.pageTotal = Math.ceil(total / _this.size);
          _this.pages = _this.getPageItems(_this.pageTotal, page, _this.itemCount || 10);
        },
  
        /**
         * 查询某一页
         * @param page
         */
        selectPage(page) {
          let _this = this;
          if (page < 1) {
            page = 1;
          }
          if (page > _this.pageTotal) {
            page = _this.pageTotal;
          }
          if (this.page !== page) {
            _this.page = page;
            if (_this.list) {
              _this.list(page);
            }
          }
        },
  
        /**
         * 当前要显示在页面上的页码
         * @param total
         * @param current
         * @param length
         * @returns {Array}
         */
        getPageItems(total, current, length) {
          let items = [];
          if (length >= total) {
            for (let i = 1; i <= total; i++) {
              items.push(i);
            }
          } else {
            let base = 0;
            // 前移
            if (current - 0 > Math.floor((length - 1) / 2)) {
              // 后移
              base = Math.min(total, current - 0 + Math.ceil((length - 1) / 2)) - length;
            }
            for (let i = 1; i <= length; i++) {
              items.push(base + i);
            }
          }
          return items;
        }
      }
    }
  </script>
  
  <style scoped>
    .pagination {
      vertical-align: middle !important;
      font-size: 1rem;
      margin-top: 0;
      margin-bottom: 1rem;
    }
    .pagination button{
      margin-right: 0.5rem;
    }
    .btn-primary.active {
      background-color: #2f7bba!important;
      border-color: #27689d !important;
      color: white !important;
      font-weight: 600;
    }
  </style>
  